<template>
   <!-- {{this.$route.query.keyword}} -->
   <div class="vpi center">
       <el-select v-model="form.price"  @change="changetype">
        
        <el-option v-for="item in option" :key="item.id" :label=item.value :value="item.id" @keydown.enter.native="cx" ></el-option>
      </el-select>
        <br>
        <div class="content">
            <div v-for="(item,index) in list" class="img" @click="detail(index)">
        <div>
    
        <el-image style="width: 270px; height: 296px" :src="`http://localhost:8080/${item.cimg}`"  />
        </div>
    <br>
     <div>
    <p class="cname">{{item.cname}}</p>
    <h6 class="cid">{{item.cid}}/{{item.releasenum}}</h6>
    <el-button type="info" plain style="margin-left: 130px; " >￥{{item.price}}</el-button>
  </div>
</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Search',

    data() {
        return {
            form:{price:''},
            option:[
            {id:'0',value:'价格升序'},
            {id:'1',value:'价格降序'}
        ],
        
            list:[],
            
        };
    },

    mounted() {
        this.form.price=this.option[0].value
        this.xc();
    },

    methods: {
        ///keywords
        xc(){
            this.$http.get('/SearchServlet/queryUserIdcoll?keywords='+this.$route.query.keyword+'&state='+this.form.price+'&username='+sessionStorage.getItem('token'))
            .then((result) => {
                this.list=result.data;
            }).catch((err) => {
                
            });
        },
        changetype(a){
            // console.log(a);
            this.form.price=a;
            this.xc();       
        },
        detail(a){
            
        },
        
    },
};
</script>

<style lang="css" scoped>
.img{
    display:inline-block;
    height: 400px;
    box-shadow:4px 4px 15px rgb(161, 160, 160) ;
    margin-left: 20px;
    margin-top: 20px;
}
.cname{
    /* margin-left: -150px; */
    margin-top: -10px;
    margin-left: 20px;
    
}
.el-image:hover{
    /* -webkit-filter: blur(2px); Chrome, Safari, Opera */
    filter: blur(8px);
}
.cid{
    display: inline-block;
    margin-left: 20px;
}
</style>